<!-- 工单池编辑表单 -->
<template>
  <q-card style="width: 800px; margin-left: 20px; margin-top: 20px">
    <!-- 标题 -->
    <q-toolbar>
      <q-toolbar-title>工单录入 </q-toolbar-title>
      <q-btn :icon="mdiKeyboardReturn" color="primary" @click="back()">返回工单池</q-btn>
    </q-toolbar>
    <q-separator />

    <!-- 内容 -->
    <q-card-section>
      <!-- prettier-ignore -->
      <q-form ref="formRef" class="row q-col-gutter-x-md">
        <q-select v-model="dto.orderType" label="工单类型" :options="wotOptions" :rules="[required]" class="col-12 col-sm-6" emit-value map-options/>
        <q-input v-model="dto.orderNo" label="工单编号"  class="col-12 col-sm-6"  readonly  placeholder="自动生成"/>
        <q-input v-model="dto.description" label="工单描述" :rules="[required]" type="textarea" rows="10" class="col-12" />
        <q-select v-model="area" label="小区名称" :options="areaOptions"  class="col-12 col-sm-6" clearable @update:model-value="changeArea" />
        <q-select v-model="room" label="房间编号" :options="roomOptions" class="col-12 col-sm-6" clearable @update:model-value="changeRoom"/>
        <q-input v-model="dto.submitAddr" label="反馈人住址" class="col-12 q-my-md" />
        <q-input v-model="dto.submitPerson" label="问题反馈人" :rules="[required]" class="col-12 col-sm-6" />
        <q-input v-model="dto.submitTel" label="反馈人电话" :rules="[required]" class="col-12 col-sm-6" />
      </q-form>
    </q-card-section>
    <q-separator />

    <!-- 操作 -->
    <q-card-actions align="center" class="q-py-lg">
      <q-btn color="primary" icon="save" :loading="loading" size="large" @click="handleSubmit">&nbsp;提 &nbsp;&nbsp;交&nbsp;&nbsp;</q-btn>
    </q-card-actions>
  </q-card>
</template>

<script lang="ts" setup>
  import { onMounted, ref } from 'vue';
  import { mdiKeyboardReturn } from '@quasar/extras/mdi-v7';

  import { required } from 'src/utils/validator';
  import { queryOptions, useCrudForm } from 'src/composables';

  import crudApi, { WorkOrderDto } from 'src/api/workorder/workorder';
  import { Message } from 'src/utils';
  import { useRouter } from 'vue-router';
  import { nextTick } from 'process';

  // 属性和事件定义
  const props = defineProps({
    id: { type: [String, Number], default: undefined },
    title: { type: String, default: '工单池表单' },
    readonly: { type: Boolean, default: false },
  });
  const emit = defineEmits(['close', 'after-save']);

  const wotOptions = ref<SelectOption[]>([]);
  const areaOptions = ref<SelectOption[]>([]);
  const roomOptions = ref<SelectOption[]>([]);
  onMounted(() => {
    queryOptions('dict/WorkOrderType').then((data) => (wotOptions.value = data));
    queryOptions('area').then((data) => (areaOptions.value = data));
  });

  const area = ref<SelectOption>();
  const room = ref<SelectOption>();
  function changeArea() {
    if (!area.value) {
      room.value = undefined;
      roomOptions.value = [];
      dto.value.submitAreaId = '';
    } else {
      dto.value.submitAreaId = area.value.value as string;
      queryOptions('room', { areaId: dto.value.submitAreaId }).then((data) => (roomOptions.value = data));
      dto.value.submitAddr = area.value.label;
    }
  }
  function changeRoom() {
    const areaName = area.value?.label ?? '';
    const roomName = room.value?.label ?? '';
    dto.value.submitRoomId = room.value?.value as string;
    dto.value.submitAddr = areaName + ' - ' + roomName;
  }
  // 表单数据
  const initWorkOrder = {} as WorkOrderDto;
  const { formRef, dto, loading, submitAction } = useCrudForm<WorkOrderDto>(crudApi, initWorkOrder, props, emit);
  function handleSubmit() {
    submitAction(dto.value, () => {
      Message.success('操作成功');
      nextTick(() => formRef.value?.resetValidation());
      dto.value = {} as WorkOrderDto;
    });
  }

  const router = useRouter();
  function back() {
    router.push('/workorder/allorder');
  }
</script>

<style lang="scss" scoped></style>
